<template>
	<view class="container">
		<view class="header-container">
			<c-navBar title="提现" isPerch isTran style="width:100%;height:60rpx;"></c-navBar>
			<view class="header-content">
				<u-row>
					<u-col span="8">
						<p style="font-size: 16px">可提现积分</p>
						<div style="margin: 20rpx 0;">
							<p style="font-size: 32px;">{{ data.treatWithdrawn }}</p>
							<p>约{{ treatWithdrawnCompute }}元</p>
						</div>
					</u-col>
					<u-col span="1"></u-col>
					<u-col span="3">
						<u-avatar :src="user.avatar" size="60"></u-avatar>
						<view style="width: 100rpx; height: 60rpx;">
						</view>
					</u-col>
				</u-row>
				<u-row style="margin-top: 20rpx;">
					<u-col span="12">
						<p>100积分可兑换1元<span style="color: #e6a23c">(最低提取20元)</span></p>
					</u-col>
				</u-row>
			</view>
			<view class="main-container">
				<h1>积分兑换</h1>
				<view class="main-content">
					<view v-for="(item, index) in cardList" :key="index" class="card"
						:style="{background: (active===item.value?'#1e90ff':'#94c7f9') }" @click="active=item.value;">
						<view v-if="item.amount === 'all'">
							<p style="font-size: 28px;">全部</p>
						</view>
						<view v-else>
							<p>{{ item.score }}</p>
							<p>兑换<span style="font-size: 20px;">{{ item.amount }}</span>元</p>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 70%; margin: 0 auto">
				<u-button type="primary" size="medium" @click="open">提现</u-button>
			</view>
			<uni-popup ref="popup" type="center" :animation="false">
				<view style="display:relative;">
					<image style="width:500rpx;height:600rpx;" src="../static/withdrawal.png"
						:show-menu-by-longpress="true"></image>
					<view style="display:absolute;top:-90rpx;height:60rpx">
						<!-- <u-button type="primary">保存</u-button> -->
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		teamIntegralStatistics,
		withdraw
	} from "@/api/user.js";
	export default {
		data() {
			return {
				show: false,
				cardList: [{
					score: 2000,
					amount: 20,
					value: 1,
				}, {
					score: 5000,
					amount: 50,
					value: 2,
				}, {
					score: 10000,
					amount: 100,
					value: 3,
				}, {
					score: 15000,
					amount: 150,
					value: 4,
				}, {
					score: 20000,
					amount: 200,
					value: 5,
				}, {
					amount: 'all',
					value: 0
				}],
				active: null,
				data: {},
				user: {},
			}
		},
		computed: {
			treatWithdrawnCompute() {
				return (this.data.treatWithdrawn / 100).toFixed(2)
			}
		},
		onShow() {
			this.getTeamIntegralStatistics()
			this.userInfo()
		},
		methods: {
			getTeamIntegralStatistics() {
				teamIntegralStatistics().then(res => {
					this.data = res;
				})
			},
			open() {
				if (this.active != null) {
					let card = this.cardList.find(val=>val.value==this.active)
					if (card.value === 0) {
						card.score = this.data.treatWithdrawn
					}
					if (this.data.treatWithdrawn === 0 || this.data.treatWithdrawn < card.score) {
						uni.showToast({
							title: '积分不足',
							icon: "none",
							duration: 1000
						});
						return;
					}
					
					withdraw(this.active).then(res=>{
						if (res) {
							this.getTeamIntegralStatistics();
							this.$refs.popup.open()
						}
					})
				} else {
					uni.showToast({
						title: '至少选择一个',
						icon: "none",
						duration: 1000
					});
				}
			},
			activeHandler(index) {
				this.active = index
				console.log(111111, this.active)
			},
			userInfo() {
				this.$api.userInfo().then(res => {
					this.user = res.data
				})
			},
		}
	}
</script>

<style>
	.container {
		width: 100%;
		height: 100%;
		font-size: 14px;
		letter-spacing: 1rpx;
	}

	.header-container {
		height: 60vh;
		background: linear-gradient(#94c7f9, white);
	}

	.header-content {
		width: 90%;
		background: #61adf6;
		border-radius: 6%;
		margin: 10rpx auto;
		box-shadow: -1px 1px 3px gray;
		padding: 35rpx;
		box-sizing: border-box;
		color: white;
		font-size: 14px;
	}

	.main-container {
		margin: 20rpx 20rpx;
		padding: 10rpx;
		background: white;
		border-radius: 3%;
		min-height: 40vh;
		padding: 35rpx;
	}

	.main-content {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		color: white;
		margin-top: 20rpx;
	}

	.card {
		width: 200rpx;
		height: 125rpx;
		background: #94c7f9;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-radius: 6%;
	}

	.active {
		background: #1e90ff;
	}
</style>